<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css3 动画</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            @keyframes myfirst{
                from {
                    background: red;
                    left: 0px;
                    top: 40px;
                    border-radius: 0;
                    transform:rotate(0deg);
                }
                to {
                    background: blue;
                    left: 300px;
                    top: 200px;
                    border-radius: 50%;
                    transform:rotate(360deg);
                }
            }
            .dong{
                animation: myfirst 2s linear 0s infinite alternate;    
            }
            /**
             * animation-name    规定需要绑定到选择器的 keyframe 名称。。
             * animation-duration    规定完成动画所花费的时间，以秒或毫秒计。
             * animation-timing-function    规定动画的速度曲线。
             * animation-delay    规定在动画开始之前的延迟。
             * animation-iteration-count    规定动画应该播放的次数。
             * animation-direction    规定是否应该轮流反向播放动画。
             * **/
            .pause {
                animation-play-state: paused;
            }
            .big_box{
                width: 100px;
                height: 100px;
                background: red;
                text-align: center;
                line-height: 100px;
                position: absolute;
                left: 0px;
                top: 40px;
            }
        </style>
    </head>
    <body>
        <div class="big_box">一个盒子</div>
        <button class="button1">开始</button>
        <button class="button2">暂停</button>        
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(".button2").attr("disabled",true);
        $(".button1").on("click.animation",function(){
            $(".big_box").addClass("dong");
            $(".button2").attr("disabled",false);
        })
        $(".button2").on("click.pause",function(){
            $(".big_box").toggleClass("pause");
        })
        
    </script>
</html>